(function(){
	window.canvasLock=function(obj){
		this.width=obj.width;
		this.height=obj.height;
		this.choosetype=obj.choosetype;
	}
	canvasLock.prototype.initDom=function(){
		var wrap=document.createElement("div");
		var str="<h3 id='title' class='title'>绘制解锁图案</h3>";
		wrap.setAttribute('style','position:absolute;top:0;left:0;right:0;bottom:0;')

		var canvas=document.createElement("canvas");
		canvas.setAttribute('id','canvas');
		canvas.style.cssText="background-color:#305066;display:inline-block;margin-top:15px";

		wrap.innerHTML=str;
		wrap.appendChild(canvas);

		var width= this.width||300;
		var height=this.height||300;

		document.body.appendChild(wrap);

		canvas.style.width= width+"px";
		canvas.style.height= height+"px";

		canvas.width= width;
		canvas.height= height;
	}
	canvasLock.prototype.drawcle=function(x,y){
		this.cxt.strokeStyle="#CFE6FF";
		this.cxt.lineWidth=2;
		this.cxt.beginPath();
		this.cxt.arc(x,y,this.r,0,Math.PI*2,true);
		this.cxt.closePath();
		this.cxt.stroke();
	}
	canvasLock.prototype.createCircle=function(){
		var n=this.choosetype;
		var count=0;
		this.r=this.cxt.canvas.width/(2+4*n);

		this.arr=[];
		this.lastPoint=[];
		this.restPoint=[];
		var r=this.r;
		for(var i=0;i<n;i++){//第几行
			for(var j=0;j<n;j++){//第几列
				count++;
				var obj={
					x : j * 4 * r + 3 * r,
					y : i * 4 * r + 3 * r,
					index:count
				}
				this.arr.push(obj)
				this.restPoint.push(obj)
			}
		}
		this.cxt.clearRect(0,0,this.cxt.canvas.width,this.cxt.canvas.height);
		for(var i=0;i<this.arr.length;i++){
			this.drawcle(this.arr[i].x,this.arr[i].y)
		}
		
	}
	//init 初始化
	canvasLock.prototype.init=function(){
		this.initDom();
		this.canvas=document.getElementById('canvas');
		this.cxt=this.canvas.getContext('2d')
		this.createCircle();
		this.touchFlag=false;
		this.bindEvent()
	}

	canvasLock.prototype.bindEvent=function(){
		var self=this;
		this.canvas.addEventListener("touchstart",function(e){
			var po=self.getPosition(e);
			for(var i=0;i<self.arr.length;i++){
				if (Math.abs(po.x-self.arr[i].x<self.r)&&Math.abs(po.y-self.arr[i].y<self.r)) {
					self.touchFlag=true;
					self.lastPoint.push(self.arr[i]);
					self.restPoint.splice(i,1);
					break;
				}
			}
			console.log("0")
		},false)
		this.canvas.addEventListener("touchmove",function(e){
			if (self.touchFlag) {
				self.update(self.getPosition(e))
				console.log("1")
			}
		},false)
		this.canvas.addEventListener("touchend",function(e){
			self.storePass();
			setTimeout(function(){
				self.cxt.clearRect(0,0,self.cxt.canvas.width,self.cxt.canvas.height);
				self.createCircle();
				document.getElementById('title').innerHTML="绘制解锁图案";
			},1000)
			
		},false)
	}
	canvasLock.prototype.drawPoint=function(){
		for(var i=0;i<this.lastPoint.length;i++){
			this.cxt.fillStyle="#CFE6FF";
			this.cxt.beginPath();
			this.cxt.arc(this.lastPoint[i].x,this.lastPoint[i].y,this.r/2,0,Math.PI*2,true);
			this.cxt.closePath();
			this.cxt.fill();
		}
	}
	canvasLock.prototype.drawLine=function(po){
		this.cxt.beginPath();
		this.cxt.lineWidth=5;
		this.cxt.moveTo(this.lastPoint[0].x,this.lastPoint[0].y);
		for(var i=0;i<this.lastPoint.length;i++){
			this.cxt.lineTo(this.lastPoint[i].x,this.lastPoint[i].y);
		}
		this.cxt.lineTo(po.x,po.y);
		this.cxt.stroke();
		this.cxt.closePath();
	}
	canvasLock.prototype.getPosition=function(e){
		var rect=e.currentTarget.getBoundingClientRect();//未了解知识
		var po={
			x:(e.touches[0].clientX-rect.left),
			y:(e.touches[0].clientY-rect.top)
		}
		return po;
	}
	canvasLock.prototype.update=function(po){
		this.cxt.clearRect(0,0,this.cxt.canvas.width,this.cxt.canvas.height);//动擦动擦
		//重新画圆
		for(var i=0;i<this.arr.length;i++){
			this.drawcle(this.arr[i].x,this.arr[i].y);
		}
		this.drawPoint();
		this.drawLine(po);

		for(var i=0;i<this.restPoint.length;i++){
			if (Math.abs(po.x-this.restPoint[i].x)<this.r && Math.abs(po.y-this.restPoint[i].y)<this.r) {
				this.drawPoint();
				this.lastPoint.push(this.restPoint[i]);
				this.restPoint.splice(i,1);
				break;
			}
		}
	}
	canvasLock.prototype.storePass=function(){
		if (this.checkPass()) {
			document.getElementById('title').innerHTML="解锁成功";
			this.drawStatusPoint("#2CFF26");
		}else{
			document.getElementById('title').innerHTML="解锁失败";
			this.drawStatusPoint('red')
		}
	}
	canvasLock.prototype.checkPass=function(){
		var pass="123654789";
		var inputPass="";
		for(var i=0;i<this.lastPoint.length;i++){
			inputPass+=this.lastPoint[i].index;
		}
		return pass===inputPass;
	}
	canvasLock.prototype.drawStatusPoint=function(color){
		this.lastPoint.forEach((item,index)=>{
			this.cxt.strokeStyle=color;
			this.cxt.beginPath();
			this.cxt.arc(item.x,item.y,this.r,0,Math.PI*2,true);
			this.cxt.closePath();
			this.cxt.stroke()
		})
	}
})()